<!DOCTYPE html>
<html lang="en">
<head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Document</title>
</head>
<body>
      <ul>
            <li>hello world</li>
            <li>hello world</li>
            <li>hello world</li>
            <li>hello world</li>
            <li>hello world</li>
      </ul>
      <script>
            // 为什么javascript有异步机制 : 
            //  1. javascript 是一个单线程语言 ;
            //  2. javascript 之中又有一些非常耗时的操作;
            // 解决耗时程序额方案 : 
            // 会被 javascript 解释器挂起 , 必须等到所有正常的代码运行结束，才会去考虑执行特殊的耗时操作;
            
            // 异步;
            
            // 1. 定时器，延时器 
            // 2. 事件
            // 3. ajax 

            // ~4. Promise;

            // console.time("test");
            // for(var i = 0 ;  i < 100 ; i ++){
            //       console.log(1);
            // }
            // console.timeEnd("test");

            // 异步程序的构成 : 所有的异步程序都有一个等待执行的函数;
            // 同步代码执行结束之后才会回头调用的函数称之为 *回调函数*;
            // alert(1);
            // setTimeout( function(){
            //       alert(2)
            // } , 1000)
            // alert(3)


            // document.onclick = function(){};

            // 面试题 ： 
            // for(var i = 0 ; i < 10 ; i ++){
            //       setTimeout( function(){
            //             console.log(i);
            //       } , 1000)
            // }
            // 打印十次 : 10  

            // for(var i = 0 ; i < 10 ; i ++){
            //       setTimeout( function(){
            //             console.log(i);
            //       } , 0)
            // }
            // 打印结果依旧是 : 10 , 10 
            var ali = document.querySelectorAll("li");
            for(var i = 0 ; i < ali.length ; i ++){
                  ali[i].onclick = function(){
                        console.log(i);
                  }
            }

      </script>
</body>
</html>